"use client"
import { Button, } from "antd";
import { useEffect, useRef } from "react";
import { useDrag, useDrop } from "react-dnd"
import style from "../index.module.css"
import { useAppDispatch } from "@/store/client";
import { acceptTypes, reactDndTypes } from "@/utils/reactDnd/reactDnd";
import { addNowData } from "@/store/client/modules/reactdndStore";
import StyleView from "../../style";
import { useHoverPositionView } from "@/utils/reactDnd/useHoverPosition";


const ButtonView: React.FC<reactDndProps> = ({ data }) => {
    const dispatch = useAppDispatch()
    const refDrage = useRef<HTMLDivElement>(null);
    const refDrop = useRef<HTMLDivElement>(null);
    const { useHoverPositionComponent, debouncedHoverEnd, isTop, isBottom, isNow } = useHoverPositionView()
    const [{ isDragging }, drage] = useDrag(() => ({
        type: reactDndTypes.BUTTON,
        item: {
            id: data.id,
            parentId: data.parentId,
            targetId: data?.targetId,
            type: reactDndTypes.BUTTON,
            name: data.name,

            onChange: data.onChange,
        },
        end: (item, monitor) => {
            debouncedHoverEnd()
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        })
    }), [data.id])
    const [{ isOver, canDrop }, drop] = useDrop(() => ({
        accept: acceptTypes,
        collect: (monitor) => ({
            isOver: monitor.isOver({ shallow: true }),
            canDrop: monitor.canDrop(),
        }),
        drop: (item: any, monitor: any) => {
            if (monitor.didDrop()) return;
            if (!monitor.isOver({ shallow: true })) return //鼠标在容器内触发
            return data;
        },
        hover(item: any, monitor) {
            if (!monitor.isOver({ shallow: true })) return;
            useHoverPositionComponent(refDrop, monitor, item, data)
        }
    }), [data.id])
    useEffect(() => {
        drage(refDrage);
        drop(refDrop);
    })

    const handleClick = (e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        dispatch(addNowData(data))
    }
    const handleClickButton = (e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        if (!data.onChange) return;
        const dynamicFunc = new Function(data.onChange);
        dynamicFunc(); // 执行代码
    }
    return (
        <div>
            {!data.targetId && <div ref={refDrage}>按钮</div>}
            {data.targetId && <div ref={refDrop} className="relative pb-2 w-full"  >
                {!isDragging && <div className={` relative p-2 ${isNow(data) ? " w-full h-full  border-1 border-b-blue-300" : ''}`}>
                    <StyleView refDrage={refDrage} data={data} />
                    <div onClick={handleClick} >
                        {/* <Button onClick={handleClickButton}>{data.name}</Button> */}
                        <Button >{data.name}</Button>
                    </div>
                </div>}
            </div>}
        </div>

    )
}
export default ButtonView;